<template>
    <div style="overflow: auto;height:600px">
        <div class="div1">
            <h1>加载远程组件Button.js</h1>
            <button-element style="margin-right: 20px;color:red" @click="count='Hello World'"/>
            <button-element style="margin-right: 20px;color:blueviolet" @click="count='To Add'" text="To Add"/>
            <button-element style="margin-right: 20px;font-weight: bold;" @click="count='To Dec'" text="To Dec"/><br>
            <span>点击了{{count}}</span>
        </div>
        <div class="div2">
            <h1>加载远程组件Content.vue</h1>
            <content-element @addTips="addTips" ref="content" 
            style="color: black;font-weight:bold"/>
            <p style="font-size: 20px;">从Content.vue中获取到的数据: {{count2}}</p>
        </div>
        <div style="width:340px;height:220px;margin: 0 auto;">
            <img src="../assets/ds_img1.png" style="width:340px;height:220px;">
            <img :src="img2" style="width:340px;height:220px;object-fit: cover;margin-top: 15px;">
        </div>
    </div>
    
    
</template>

<script>
import {ref} from 'vue'
export default {
    setup() {
        const count = ref('');
        const count2 = ref('');
        const img2=ref("https://p1.music.126.net/cKDI1r6YkyCgG6GDSXE_Xw==/109951165380673643.jpg")
        const addTips = (data) => {
            count2.value=data;
            console.log('data',data);
        };
        
        return {
          count,img2,count2,addTips
        }
      }
};
</script>

<style scoped>
.div1 {
    width: 340px;
    margin: 30px auto;
    float: left;
    margin-left: 18px;
}
.div2{
    clear: both;
    width: 340px;
    margin: 20px auto;
}
h1{
    font-size: 20px;
}
</style>